<template>
  <view class="area-picker" v-if="show">
    <view class="mask" @tap="close"></view>
    <view class="content">
      <view class="header">
        <text class="cancel" @tap="close">取消</text>
        <text class="title">选择地区</text>
        <text class="confirm" @tap="confirm">确定</text>
      </view>
      <view class="tabs">
        <view 
          class="tab-item" 
          v-for="(item, index) in tabs" 
          :key="index"
          :class="{ active: currentTab === index }"
          @tap="switchTab(index)"
        >
          <text>{{ item }}</text>
        </view>
      </view>
      <scroll-view 
        class="area-list"
        scroll-y
        :scroll-top="scrollTop"
      >
        <view 
          class="area-item"
          v-for="item in currentList"
          :key="item.code"
          :class="{ active: isSelected(item) }"
          @tap="selectArea(item)"
        >
          <text>{{ item.name }}</text>
          <text class="icon" v-if="isSelected(item)">✓</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import areaData from './area-data.js'

const props = defineProps({
  show: Boolean,
  defaultValue: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['close', 'confirm'])

const currentTab = ref(0)
const selectedProvince = ref(null)
const selectedCity = ref(null)
const selectedArea = ref(null)
const scrollTop = ref(0)

// 标签页
const tabs = computed(() => {
  const result = ['请选择']
  if (selectedProvince.value) {
    result[0] = selectedProvince.value.name
    result[1] = '请选择'
  }
  if (selectedCity.value) {
    result[1] = selectedCity.value.name
    result[2] = '请选择'
  }
  if (selectedArea.value) {
    result[2] = selectedArea.value.name
  }
  return result.slice(0, currentTab.value + 2)
})

// 当前列表数据
const currentList = computed(() => {
  if (currentTab.value === 0) {
    return areaData.provinces
  } else if (currentTab.value === 1) {
    return areaData.cities[selectedProvince.value.code] || []
  } else {
    return areaData.areas[selectedCity.value.code] || []
  }
})

// 判断是否选中
const isSelected = (item) => {
  if (currentTab.value === 0) {
    return selectedProvince.value?.code === item.code
  } else if (currentTab.value === 1) {
    return selectedCity.value?.code === item.code
  } else {
    return selectedArea.value?.code === item.code
  }
}

// 切换标签页
const switchTab = (index) => {
  if (index === 1 && !selectedProvince.value) return
  if (index === 2 && !selectedCity.value) return
  currentTab.value = index
  scrollTop.value = 0
}

// 选择地区
const selectArea = (item) => {
  if (currentTab.value === 0) {
    selectedProvince.value = item
    selectedCity.value = null
    selectedArea.value = null
    currentTab.value = 1
  } else if (currentTab.value === 1) {
    selectedCity.value = item
    selectedArea.value = null
    currentTab.value = 2
  } else {
    selectedArea.value = item
    // 选择完成，可以直接确认
    confirm()
  }
  scrollTop.value = 0
}

// 确认选择
const confirm = () => {
  if (!selectedProvince.value) return
  const result = {
    province: selectedProvince.value,
    city: selectedCity.value,
    area: selectedArea.value,
    // 格式化后的地址文本
    text: [
      selectedProvince.value.name,
      selectedCity.value?.name,
      selectedArea.value?.name
    ].filter(Boolean).join('')
  }
  emit('confirm', result)
  close()
}

// 关闭弹窗
const close = () => {
  emit('close')
}

// 初始化选中值
const initValue = () => {
  if (props.defaultValue?.length) {
    const [province, city, area] = props.defaultValue
    selectedProvince.value = province
    selectedCity.value = city
    selectedArea.value = area
    currentTab.value = area ? 2 : city ? 1 : 0
  } else {
    selectedProvince.value = null
    selectedCity.value = null
    selectedArea.value = null
    currentTab.value = 0
  }
  scrollTop.value = 0
}
</script>

<style scoped>
.area-picker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.cancel, .confirm {
  font-size: 28rpx;
  padding: 0 20rpx;
}

.cancel {
  color: #666;
}

.confirm {
  color: #e1251b;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
}

.tabs {
  display: flex;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.tab-item {
  margin-right: 40rpx;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #e1251b;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20rpx;
  height: 4rpx;
  background: #e1251b;
}

.area-list {
  flex: 1;
  height: 600rpx;
}

.area-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  font-size: 28rpx;
}

.area-item.active {
  color: #e1251b;
}

.area-item .icon {
  color: #e1251b;
  font-size: 32rpx;
}
</style> 